<template>
  <div class="all">
    <table class="contentTable">
      <thead>
        <tr>
          <th colspan="2">
            查询设定
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="contentTable-left">
            日期范围
          </td>
          <td>
            <div class="block">
              <el-date-picker
                size="mini"
                v-model="dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions2">
              </el-date-picker>
            </div>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            种类
          </td>
          <td>
            <ul>
              <button>
                全部选择
              </button>
              <button>
                全部不选择
              </button>
            </ul>
            <ul>
              <li>
                <span>快开彩彩种</span>
                <hr/>
                <el-radio>全选</el-radio>
              </li>


              <li>
                <span>香港彩彩种</span>
                <hr/>
                <el-radio>全选</el-radio>
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            期数
          </td>
          <td>
            <select v-model="period">
              <option value="0">
                  请选择单一彩种
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            {{}}级代理报表种类
          </td>
          <td>
            <el-radio v-model="reportType" :label="1">
             交收报表
            </el-radio>
            <el-radio v-model="reportType" :label="2">
              分类报表
            </el-radio>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            结算状态
          </td>
          <td>
            <el-radio v-model="ostatus" :label="1">
              已结算
            </el-radio>
            <el-radio v-model="ostatus" :label="2">
              未结算
            </el-radio>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            用户名
          </td>
          <td>
            <input type="text" v-model="userName">
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            会员金额
          </td>
          <td>
            <input type="text" v-model="memberAmount">
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            盈亏金额
          </td>
          <td>
            <input type="text" v-model="dividend">
          </td>
        </tr>
      </tbody>
    </table>

    <el-row class="bottom-tip">
      备注：6AM-7AM是系统维护维护时间，会影响报表导出功能，敬请谅解
    </el-row>

    <el-row class="bottom">
      <button @click="submit">确认</button>
      <button>取消</button>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'notice',
  methods: {
    submit() {
      const params = {
        bt: this.dateRange[0],
        et: this.dateRange[0],
        ostatus: this.ostatus,
        games: [],
        username: this.userName,
        period: '',
        amount: this.memberAmount,
        dividend: this.dividend,
      }
      console.log(params)
      if (this.reportType === 1) {

      } else {

      }
    },
  },
  data() {
    return {
      dateRange: '', // 日期范围
      reportType: 1, // 报表种类
      ostatus: 1, // 结算类型
      userName: '', // 用户名
      memberAmount: '', // 会员金额
      dividend: '', // 盈亏金额
      period: 0, // 彩种期数，选择单一彩种时可选
      pickerOptions2: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '本星期',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            const date = new Date()
            var week = date.getDay() // 获取时间的星期数
            date.setDate(date.getDate() - week + 1)
            start.setTime(date)
            date.setDate(date.getDate() + 6)
            end.setTime(date)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '上星期',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            const date = new Date()
            var week = date.getDay() // 获取时间的星期数
            date.setDate(date.getDate() - week)
            end.setTime(date)
            date.setDate(date.getDate() - 6)
            start.setTime(date)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '本月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            const date = new Date()
            let currentMonth = date.getMonth()
            const nextMonth = ++currentMonth
            const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
            const oneDay = 1000 * 60 * 60 * 24
            const lastTime = new Date(nextMonthFirstDay - oneDay)
            start.setTime(date.setDate(1))
            end.setTime(lastTime)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '上个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            const date = new Date()
            const oneDay = 1000 * 60 * 60 * 24
            const lastMonthlast = new Date(date.setDate(1) - oneDay) // 上个月最后一天
            let currentMonth = date.getMonth()
            const lastMonth = --currentMonth
            const lastMonthFirst = new Date(date.getFullYear(), lastMonth, 1) // 上个月第一天
            start.setTime(lastMonthFirst)
            end.setTime(lastMonthlast)
            picker.$emit('pick', [start, end])
          },
        }],
      },
    }
  },
  computed: { ...mapGetters(['info']) },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .all{
    padding: 10px;
  }
.contentTable{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.contentTable th{
  box-shadow: inset 0px -14px 19px 2px #CAE8F6;
  height: 25px;
  text-align: center;
  color: #131950;
  font-weight: bold;
  line-height: 25px;
  font-size:14px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #B9C2CB;
  margin: 0;
}
.contentTable td{
  height: 25px;
  color: #131950;
  line-height: 25px;
  font-size:14px;
  border: 1px solid #B9C2CB;
  padding: 5px;
}
.contentTable td input[type='text']{
  width:100px;
}
.contentTable td .el-radio{
  margin:0 5px;
}
.contentTable td button{
  margin:0 5px;
  background-color: #00b45a;
  border:0;
  padding: 5px 10px;
  color:#FFF;
}
.contentTable td button:hover{
  text-decoration: underline;
}
.contentTable ul li{
  height:25px;
  line-height: 25px;
}
.block span{
  padding:0 !important;
}
.contentTable hr{
  width:600px;
  display: inline-block;
  vertical-align: middle;
}
.contentTable-left{
  text-align: right;
  color: #344b50;
  background: #f2f2f2;
  width:30%;
}

.bottom-tip{
  text-align: center;
  color:red;
  font-size:13px;
  margin: 10px;
}

.bottom{
  text-align: center;
  margin-top: 20px;
}
.bottom button{
  width: 86px;
  height: 31px;
  line-height: 26px;
  color: #eeeeee;
  border: 0px;
  background-color: #487BD1;
  border-radius: 5px;
}
.bottom button:hover{
  background-color: #7bb1d0;
  color:#fff100;
}
</style>
<style>
  .block .el-date-editor .el-range-separator{
    padding: 0;
  }
</style>
